<template>
    <!-- <div class="statistics">
        <div class="user">
            <div class="user-left">
                <div class="usermsg">
                    <el-row class="demo-avatar demo-basic">
                        <el-col :span="12">
                            <div class="demo-basic--circle">
                                <div class="block">
                                    <el-avatar shape="circle" :size="50" :src="userInfo.headimgurl" class="stuHeader"></el-avatar>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <div class="text">
                        <i class="iconfont icon-shezhi"></i>
                        <p>{{userInfo.nickname}}</p>
                        <p>web前端开发工程师</p>
                    </div>
                </div>
                <div class="calendar">
                    <p>日历</p>
                    <el-calendar v-model="value">
                    </el-calendar>
                </div>
            </div>
            <div class="user-right">
                <div class="right-top">
                    <div class="top-aside">
                        <div class="morning">早上好</div>
                        <div class="weather">南京天气阴<i class="iconfont icon-yintian"></i></div>
                    </div>
                    <div class="message">通知公告</div>
                </div>
            </div>
        </div>
    </div> -->
    <div class="statistics">
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content bg-purple usermsg">
                    <el-row class="demo-avatar demo-basic">
                        <el-col :span="12">
                            <div class="demo-basic--circle">
                                <div class="block">
                                    <el-avatar shape="circle" :size="50" :src="userInfo.headimgurl" class="stuHeader"></el-avatar>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <div class="text">
                        <i class="iconfont icon-shezhi"></i>
                        <p>{{userInfo.nickname}}</p>
                        <p>web前端开发工程师</p>
                    </div>
                </div>
            </el-col>
            <el-col :span="6"><div class="grid-content bg-purple morning">早上好</div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple message">通知公告</div></el-col>            
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6"><div class="grid-content bg-purple morning">早上好</div></el-col>           
        </el-row>
    </div>
</template>
<script>
    import {mapState} from "vuex"
    export default{
        data(){
            return{
                value: new Date()
            }
        },
        computed:{
            ...mapState(["userInfo"])
        }
    }
</script>
<style>
.statistics{
    /* width: 100%; */
    margin-top: 50px;
    padding: 5px;
    background-image: linear-gradient(135deg,#4c67ff,#5635df);
    border-radius: 10px;
}

  .el-col {
    border-radius: 10px;
  }
  .bg-purple-dark {
    background: #fff;
  }
  .bg-purple {
    background: #fff;
    display: flex;
    padding: 20px;
    position: relative;
  }
  .bg-purple-light {
    background: #fff;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #fff;
  }
  .text{
      margin-left: 20%;
  }
  .icon-shezhi{
      font-size: 16px;
      position: absolute;
      top: 10%;
      right: 5%;
  }
  .usermsg{
      height: 150px;
      text-align: center;
  }
  .morning{
      padding: 30px;
  }
  .message{
      padding: 30px;
  }
</style>